<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="flex justify-center p-6">
    <label
      for="AcceptConditions"
      class="relative block h-8 w-12 [-webkit-tap-highlight-color:transparent]"
    >
      <input type="checkbox" id="AcceptConditions" class="peer sr-only" />

      <span class="absolute inset-0 m-auto h-2 rounded-full bg-gray-300"></span>

      <span
        class="absolute inset-y-0 start-0 m-auto size-6 rounded-full bg-gray-500 transition-[inset-inline-start] peer-checked:start-6 peer-checked:*:scale-0"
      >
        <span class="absolute inset-0 m-auto size-4 rounded-full bg-gray-200 transition-transform">
        </span>
      </span>
    </label>
  </body>
</html>
